<template>
	<div class="banner">
		<Banner :propsbanner='bannerList'></Banner>
		<Icons></Icons>
		<Scroll></Scroll>
		<Category></Category>
		<Spike :propspike='SpikeList'></Spike>
		<Tabs></Tabs>
		<Main></Main>
		<Travel></Travel>
		<BottonNav :propsurl='arrUrl'></BottonNav>
	</div>
</template>

<script>
import Banner from './pages/Banner.vue';
import Icons from './pages/Icons.vue';
import Scroll from './pages/Scroll.vue';
import Spike from './pages/Spike.vue';
// 引入选项卡区域最大的区域
import Category from './pages/Category.vue';
import Tabs from './pages/Tabs.vue';
import Main from '../main/Main.vue';
import Travel from './pages/Travel.vue';
import BottonNav from '../default/BottonNav.vue';

// 导出组件
export default{
	name : 'Home',
	// 组件列表的调用
	components:{
		Banner,
		Icons,
		Scroll,
		Spike,
		Category,
		Tabs,
		Main,
		Travel,
		BottonNav
	},
	data(){
		return{
			arrUrl : [require('@/assets/img/img11.9384aa4a.png'),require('@/assets/img/img22.98e00f94.png'),require('@/assets/img/img33.3d66679c.png')],
			bannerList : [],
			SpikeList : {},
		}
	},
// create:当前组件创建之后【el挂载之前(标签未渲染)，data函数已经完成了初始化】
	// 父组件需要将请求的数据给到子组件的话，满足：1.data函数已初始化；2.响应数据传给子组件(组件已渲染)
	// mounted:组件挂载之后【如果接口复杂/多个接口的时候，优先考虑mounted】
	created(){
		// 备份[避免堵塞]
		let that = this;
		// 向dataHome.json文件发起异步请求
		// 当前是本地请求，需要考虑项目的路径【实际开发时请求来源第三方】
		this.axios.get('http://localhost:8080/api/dataHome.json').then( (res)=>{
			
			let data = res.data.Homemsg[0];
			console.log(res.data.Homemsg[0])
			// 提取banner组件的数据
			that.bannerList = data.BannerVueList;
			// 提取spike组件的数据
			that.SpikeList = data.SpikeVueList;
			console.log(that.SpikeList.spike_List);
		
		}).catch( (error)=>{
			console.log( error );
		});
	}
}
</script>

<style>
</style>
